<script setup>
import { ref,reactive } from 'vue'
import { userLogin } from '@/utils/api'
import axios from 'axios';
import { ElMessage } from 'element-plus'
import { setUser } from '@/utils/session'
import { useRouter } from 'vue-router'
//获取路由实例
const router = useRouter();

const loginData = ref({
    username: '',
    password: '',
})
//表单校验规则
const rules = ref({
    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
    password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
})
//声明表单组件的引用
const loginForm = ref(null);

//用户登录
function toLogin() {
    //验证
    loginForm.value.validate(async (valid) => {
        if (!valid) {
            //说明没有验证通过
            return;
        }
        //验证通过
        console.log("登录数据：", loginData.value);
       /*  let user = {
            username: loginData.value.username,
            password: loginData.value.password
        } */
        let data = new FormData();
        data.append('username',loginData.value.username);
        data.append('password',loginData.value.password);
        console.log(data);
        const rs = await userLogin(data);
        console.log("后端返回结果", rs);
        if (rs.code == 1) {
            ElMessage.success('登录成功')
            console.log("DATA===>", rs.data);
            //保存用户信息
            setUser(rs.data);
            //跳转到系统首页面
            router.push("/home")
        }
    })
}
//验证码图片
const img = ref("/public/image/01.png");




</script>
<template>
    <div class="bg">
    <div class="login">
        <div class=" header">CRM后台管理</div>
        <el-form label-width="120px" ref="loginForm" :model="loginData" status-icon :rules="rules">
            <el-form-item label="账号: " prop="username">
                <el-input v-model="loginData.username" placeholder="请输入账号" clearable class="ipt" />
            </el-form-item>
            <el-form-item label="密码: " prop="password">
                <el-input v-model="loginData.password" type="password" placeholder="请输入密码" class="ipt"
                    show-password></el-input>
            </el-form-item>
        </el-form>
        <div class="mi-captchas">
            <!-- 基础效果 -->
            <mi-captcha ref="captcha" theme-color="#00FFFF" bg-color="#fff" text-color="#000"
             :image="img"  />
        </div>
        <div style="text-align: center; margin-top: 50px;">
            <el-button type="primary" @click="toLogin">登录</el-button>
        </div>

    </div>
    </div>
</template>
<style scoped>
.bg{
    background-image: url("/public/image/bg.png");
    background-size: cover;
    width: 100%;
    min-height: 97vh;
    display: flex; /* 设置为弹性盒子布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.login {
    
    width: 500px;
    height: 400px;
    border: #ddd solid 2px;
    border-radius: 15px;
    
}

.ipt {
    width: 80%;
}
.mi-captchas{
    padding-left: 100px;
}
.header {
    height: 150px;
    line-height: 150px;
    font-size: 36px;
    text-align: center;
}
</style>